---
type: tutorial
title: 你的第一行 Astro 代码
description: |-
  教程：搭建你的 Astro 博客 —
   对教程项目主页的首次编辑
---
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

<PreCheck>
  - 对新网站的第一次编辑
</PreCheck>

## 编辑你的主页

<Steps>
1. 打开你的代码编辑器，然后在资源管理器文件窗口中导航至 `src/pages/index.astro`，并单击文件名打开文件内容。

    `index.astro` 文件的内容应该如下所示：

    ```astro title="src/pages/index.astro"
    ---
    ---

    <html lang="zh-cn">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" type ="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content = {Astro.generator} >
        <title>Astro</title>
      </head>
      <body>
        <h1>Astro</h1>
      </body>
    </html>
    ```

2. 编辑页面 `<body>` 的内容。

    在编辑器中更改页面上的标题文本并保存。

    ```astro title="src/pages/index.astro" del={2} ins={3}
    <body>
      <h1>Astro</h1>
      <h1>我的 Astro 站点</h1>
    </body>
    ```

3. 检查浏览器预览，你应该会看到你的页面内容已更新。
</Steps>

恭喜！你现在是一名 Astro 开发人员！

本单元的其余部分，将教会你版本控制和发布可以炫耀的网站。

<Box icon="check-list">

## 任务清单

<Checklist>
- [ ] 我可以更改页面内容，并在浏览器中查看。
- [ ] 我是 Astro 开发者！
</Checklist>
</Box>
